<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>旋转转盘</title>

		<style>
			* {
				padding: 0;
				margin: 0;
			}

			.rotate-bar {
				position: relative;
				height: 400px;
				width: 400px;
				border: 2px solid #032d60;
				-webkit-box-shadow: inset 0 0 30px #07417a;
				box-shadow: inset 0 0 30px #07417a;
				background: #171e3e;
			}

			.rotate-bar img {
				position: absolute;
				left: 200px;
				top: 200px;
				height: 50%;
				transform: translate(-50%, -50%);
			}

			.rotate-bar .x1 {
				animation-name: xz1;
				animation-iteration-count: infinite;
				animation-timing-function: linear;
				animation-duration: 8s;
				/* animation: xz1 8s infinite linear; */
			}

			.rotate-bar .x2 {
				animation-name: xz2;
				animation-iteration-count: infinite;
				animation-timing-function: linear;
				animation-duration: 7s;
				/* animation: xz2 7s infinite linear; */
			}

			@keyframes xz1 {
				from {
					transform: translate(-50%, -50%) rotate(0deg);
				}

				50% {
					transform: translate(-50%, -50%) rotate(180deg);
				}

				to {
					transform: translate(-50%, -50%) rotate(360deg);
				}
			}

			@keyframes xz2 {
				from {
					transform: translate(-50%, -50%) rotate(0deg);
				}

				50% {
					transform: translate(-50%, -50%) rotate(-180deg);
				}

				to {
					transform: translate(-50%, -50%) rotate(-360deg);
				}
			}
		</style>
	</head>

	<body>
		<div class="rotate-bar">
			<img src="./assets/images/1.png" alt="1.png" />
			<img class="x1" src="./assets/images/2.png" alt="1.png" />
			<img class="x2" src="./assets/images/3.png" alt="1.png" />
			<img src="./assets/images/4.png" alt="1.png" />
		</div>
	</body>
</html>
